<template>
  <div id="app">
    
    <div class="out">
      <div class="navBox" v-html="navEle"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      navEle:"",
      navList:[{
        id:1,
        name:"总览",
        parentid:null
      },
      {
        id:2,
        name:"山东",
        parentid:1
      },
      {
        id:3,
        name:"河北",
        parentid:1
      },
      {
        id:4,
        name:"河南",
        parentid:1
      },
      {
        id:5,
        name:"济南",
        parentid:2
      },
      {
        id:6,
        name:"青岛",
        parentid:2
      },
      {
        id:7,
        name:"烟台",
        parentid:2
      },
      {
        id:8,
        name:"石家庄",
        parentid:3
      },
      {
        id:9,
        name:"唐山",
        parentid:3
      },
      {
        id:10,
        name:"历下区",
        parentid:5
      },
      {
        id:11,
        name:"市中区",
        parentid:5
      },
      {
        id:12,
        name:"天桥区",
        parentid:5
      }
      
      
      ]
    }
  },
  methods:{
    getNav(pid=1){
      var str="";

      this.navList.forEach(item=>{
        if(item.id==pid){
          str+=`
            <div class="title">${item.name}</div>
              <ul class="layer1">
          `
        }
        if(item.parentid==pid){
          str+=`
            <li>${item.name}
              <ul class="layer2">${this.getSubNav(item.id)}</ul>
            </li>
          `
        }
      })
      this.navEle=str
    },

    getSubNav(id,sub=0){
      var str="";
      sub++      
      this.navList.forEach(item=>{
        if(item.parentid==id){
          str+=`
            <li>
              
              ${item.name}
              <ul class="subnav${sub}">${this.getSubNav(item.id,sub)}</ul>
            </li>
          `
        }
      })
      return str;
    }
    
  },
  mounted(){
    this.getNav()
  }
}
</script>

<style>
*{ padding:0; margin:0; box-sizing: border-box; list-style: none;}
.out{ width:300px; background: #f4f4f4; margin:100px;}
.out .title{ line-height: 50px; background: #007ACC; font-size:20px; color:#fff; padding-left:20px;}

.navBox li{ background: #fff;line-height: 2.5em; }
.layer1 > li{ background: #39BAE8;}
.layer1 > li::before{ content: "★";padding-left:30px;padding-right:10px;  }
.layer2 > li{ background: #B9EDF8;}
.layer2 > li::before{ content: "◆";padding-left:50px;padding-right:10px; }
.subnav1 > li{ background: #F5F7FA;}
.subnav1 > li::before{  content: "◇"; padding-left:70px;padding-right:10px;}
</style>
